<template>
    <div class="dashboard-container">
       <!-- 筛选查询 -->
       <el-form :inline="true">
           <el-form-item label="客户名称">
               <el-input placeholder="请输入客户名" v-model="params.realName" clearable></el-input>
           </el-form-item>
           <el-form-item label="号码">
               <el-input placeholder="请输入号码" v-model="params.phone" clearable></el-input>
           </el-form-item>
           <el-button type="primary" @click="getList">查询</el-button>
       </el-form>

       <!-- 数据 -->
       <el-table :data="list" v-loading="loading">
           <el-table-column type="index" label="序号"></el-table-column>
           <el-table-column prop="realName" label="客户名称"></el-table-column>
           <el-table-column prop="phone" label="号码"></el-table-column>
           <el-table-column prop="createTime" label="创建时间"></el-table-column>
           <el-table-column  label="操作" width="200px">
           <template slot-scope="{row}">
               <el-button type="text" @click="handleDetail(row)">客户详情</el-button>
               <el-button type="text" @click="handleAddCoustom(row)">添加意向客户</el-button>
           </template>
           </el-table-column>
       </el-table>

       <!-- 分页 -->
       <div style="padding-top:30px; text-align: right;">
           <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="params.pageIndex+1"
           background
           :page-sizes="[10, 20, 30, 40]"
           :page-size="params.pageCount"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
           </el-pagination>
       </div>

    </div>
</template>
<script>
import { personGetlist, personRelease } from '@/api/person'
import { collectionAddPersonsToAddressBook } from '@/api/collection'
import moment from 'moment';
export default {
   data(){
       return {
           params: {
               pageCount: 10,
               pageIndex: 0,
               phone: '',
               realName: '',
               status: 0
           },
           list: [],
           total: 0,
           loading: false
       }
   },
   mounted(){
       this.getList();
   },
   methods: {
       handleDetail(row){
           this.$router.history.push({ path: '/crm/detail?id='+row.id })
       },
       // 添加客户 - 单个
       async handleAddCoustom(row){
           await collectionAddPersonsToAddressBook({ personIds: [row.id] })
           this.$message.success({ message: '操作成功' })
           this.getList();
       },
       async getList(){
           this.loading = true;
           let data = await personGetlist(this.params)
           this.loading = false;
           this.list = data.data.list.map(item=>{
               item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
               return item;
           })
           this.total = data.data.totalCount
       },
       //切换数量
       handleSizeChange(val){
           this.params.pageIndex = 0;
           this.params.pageCount = val;
           this.getList();
       },
       //切换页码
       handleCurrentChange(val){
           this.params.pageIndex = val-1;
           this.getList();
       }
   }
}
</script>

<style lang="scss" scoped>
.dashboard {
 &-container {
   margin: 30px;
   
 }
}
</style>